import ArkJsonEditor from '../ark-json-editor/ArkJsonEditor.vue';
import {action} from '@storybook/addon-actions';

export default {
  title: 'base-component-v1/ArkJsonEditor',
  component: ArkJsonEditor,
  parameters: {
    docs: {
      description: {
        component: `请配合 <span style="font-weight: bold;font-size: 14px;color: grey">vue、tailwindcss、lodash、vanilla-jsoneditor</span> 使用`
      }
    }
  },
  argTypes: {
    options: {description: 'JSONEditor配置对象'},
    content: {description: 'JSONEditor内容'},
    changeContent: {description: 'JSON改变后的事件，参数为改变后的内容'},
  }
};

export const Basic = {
  name: '基本使用',
  render: (args) => ({
    components: {ArkJsonEditor},
    setup() {
      let object = {name: 'TNT'};
      let string = '{"name":\"TYT\"}';
      return {object, string, args};
    },
    template: `
      <el-button type="primary" style="margin-bottom: 20px" @click="args.content=object">
        外部改变Content为Object
      </el-button>
      <el-button type="primary" style="margin-bottom: 20px" @click="args.content=string">
        外部改变Content为String
      </el-button>

      <ArkJsonEditor v-bind="args" @changeContent="handleChangeContent"/>
    `,
    methods: {
      handleChangeContent: action('changeContent')
    }
  }),
  args: {
    content: '{"name": "SYX"}',
  },
};